<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>🎯 Vue 3 计算属性 (computed) - 智能购物车</title>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <style>
    body {
      font-family: 'Arial', sans-serif;
      max-width: 800px;
      margin: 0 auto;
      padding: 20px;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      min-height: 100vh;
    }
    .container {
      background: white;
      border-radius: 15px;
      padding: 30px;
      margin: 20px 0;
      box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    }
    .title {
      color: #42b983;
      text-align: center;
      font-size: 28px;
      margin-bottom: 30px;
      text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
    }
    .section {
      background: #f8f9fa;
      border-radius: 10px;
      padding: 20px;
      margin: 20px 0;
      border-left: 5px solid #42b983;
    }
    .section h3 {
      color: #333;
      margin-top: 0;
    }
    .code-block {
      background: #2d3748;
      color: #e2e8f0;
      padding: 15px;
      border-radius: 8px;
      font-family: 'Courier New', monospace;
      margin: 10px 0;
      overflow-x: auto;
    }
    .product-card {
      background: #fff;
      border: 2px solid #42b983;
      border-radius: 10px;
      padding: 20px;
      margin: 15px 0;
      box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }
    .product-info {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 15px;
      margin: 15px 0;
    }
    .control-group {
      display: flex;
      align-items: center;
      gap: 15px;
      margin: 10px 0;
    }
    .quantity-control {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .quantity-btn {
      background: #42b983;
      color: white;
      border: none;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      cursor: pointer;
      font-size: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .quantity-btn:hover {
      background: #3aa876;
    }
    .quantity-btn:disabled {
      background: #ccc;
      cursor: not-allowed;
    }
    .price-display {
      background: #e8f5e8;
      padding: 10px;
      border-radius: 6px;
      font-weight: bold;
      color: #2d3748;
    }
    .total-display {
      background: linear-gradient(45deg, #42b983, #3aa876);
      color: white;
      padding: 20px;
      border-radius: 10px;
      text-align: center;
      font-size: 24px;
      font-weight: bold;
      margin: 20px 0;
      box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    }
    .highlight {
      color: #e74c3c;
      font-weight: bold;
    }
    .discount-badge {
      background: #feca57;
      color: #333;
      padding: 4px 8px;
      border-radius: 4px;
      font-size: 12px;
      font-weight: bold;
    }
    .savings {
      background: #ff6b6b;
      color: white;
      padding: 10px;
      border-radius: 6px;
      text-align: center;
      margin: 10px 0;
    }
    button {
      background: #42b983;
      color: white;
      border: none;
      padding: 10px 20px;
      border-radius: 6px;
      cursor: pointer;
      font-size: 14px;
      transition: background 0.3s;
    }
    button:hover {
      background: #3aa876;
    }
    .reset-btn {
      background: #e74c3c;
    }
    .reset-btn:hover {
      background: #c0392b;
    }
  </style>
</head>
<body>
  <div id="app">
    <div class="container">
      <h1 class="title">🎯 Vue 3 计算属性 (computed) - 智能购物车</h1>
      
      <div class="section">
        <h3>📚 学习目标：掌握 computed 计算属性的使用</h3>
        <p>计算属性会根据依赖的响应式数据自动更新，是Vue 3的核心特性之一！</p>
      </div>

      <!-- 产品展示区域 -->
      <div class="product-card">
        <h3>☕ 精品咖啡</h3>
        
        <div class="product-info">
          <div class="control-group">
            <label>单价：</label>
            <input type="number" v-model.number="price" min="1" step="0.1" style="width: 80px; padding: 5px;">
            <span class="discount-badge">{{ (discount * 10).toFixed(1) }}折</span>
          </div>
          
          <div class="control-group">
            <label>折扣率：</label>
            <input type="range" v-model.number="discount" min="0.5" max="1" step="0.1" style="flex: 1;">
            <span class="price-display">{{ (discount * 100).toFixed(0) }}%</span>
          </div>
        </div>

        <div class="control-group">
          <label>数量：</label>
          <div class="quantity-control">
            <button class="quantity-btn" @click="decreaseQuantity" :disabled="quantity <= 0">-</button>
            <span style="font-weight: bold; min-width: 30px; text-align: center;">{{ quantity }}</span>
            <button class="quantity-btn" @click="increaseQuantity">+</button>
          </div>
          <button @click="resetOrder">重置订单</button>
        </div>
      </div>

      <!-- 计算结果显示区域 -->
      <div class="section">
        <h3>💰 价格计算详情</h3>
        
        <div class="price-display" style="margin: 10px 0;">
          原价：{{ originalTotal.toFixed(2) }} 元
        </div>
        
        <div v-if="savings > 0" class="savings">
          💰 节省：{{ savings.toFixed(2) }} 元
        </div>
        
        <div class="total-display">
          应付：{{ finalTotal.toFixed(2) }} 元
        </div>

        <div v-if="quantity > 10" class="highlight" style="text-align: center; margin: 10px 0;">
          🎉 批量购买优惠！
        </div>
      </div>

      <!-- 代码示例区域 -->
      <div class="section">
        <h3>💻 计算属性代码示例</h3>
        <div class="code-block">
// 基础计算属性
const price = ref(25)
const quantity = ref(2)
const discount = ref(0.8)

// 计算总价（自动缓存，依赖变化时重新计算）
const finalTotal = computed(() => {
  return price.value * quantity.value * discount.value
})

// 计算原价
const originalTotal = computed(() => {
  return price.value * quantity.value
})

// 计算节省金额
const savings = computed(() => {
  return originalTotal.value - finalTotal.value
})
        </div>
      </div>

      <!-- 计算属性特点说明 -->
      <div class="section">
        <h3>⭐ 计算属性特点</h3>
        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px;">
          <div style="background: #e8f5e8; padding: 15px; border-radius: 8px;">
            <h4>✅ 优点：</h4>
            <ul>
              <li>自动缓存结果</li>
              <li>依赖变化时自动更新</li>
              <li>代码更清晰</li>
              <li>性能更好</li>
            </ul>
          </div>
          <div style="background: #fff3cd; padding: 15px; border-radius: 8px;">
            <h4>💡 使用场景：</h4>
            <ul>
              <li>复杂数据计算</li>
              <li>数据格式化</li>
              <li>依赖多个数据源</li>
              <li>需要缓存的结果</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script>
    const { createApp, ref, computed } = Vue;

    createApp({
      setup() {
        // 基础数据
        const price = ref(25);
        const quantity = ref(2);
        const discount = ref(0.8);

        // 计算属性：最终总价（含折扣）
        const finalTotal = computed(() => {
          return price.value * quantity.value * discount.value;
        });

        // 计算属性：原价（无折扣）
        const originalTotal = computed(() => {
          return price.value * quantity.value;
        });

        // 计算属性：节省金额
        const savings = computed(() => {
          return originalTotal.value - finalTotal.value;
        });

        // 方法：增加数量
        const increaseQuantity = () => {
          quantity.value++;
        };

        // 方法：减少数量
        const decreaseQuantity = () => {
          if (quantity.value > 0) {
            quantity.value--;
          }
        };

        // 方法：重置订单
        const resetOrder = () => {
          price.value = 25;
          quantity.value = 2;
          discount.value = 0.8;
        };

        // 返回模板需要的数据和方法
        return {
          // 数据
          price,
          quantity,
          discount,
          // 计算属性
          finalTotal,
          originalTotal,
          savings,
          // 方法
          increaseQuantity,
          decreaseQuantity,
          resetOrder
        };
      }
    }).mount('#app');
  </script>
</body>
</html>